<template>
	<view class="">
		<slot></slot>
		<view class="pagingBox">
			<waves class="previous" :isDisable="page === 1" @onTap="previous">
				Previous
			</waves>
			<waves class="next" :isDisable="(page * 10 > count)" @onTap="next">
				Next
			</waves>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			count: {
				type: Number | String,
				default: 0
			},
			value: {}
		},
		computed: {
			page: {
				get() {
					return this.value;
				},
				set(val) {
					this.$emit('input', val);
				}
			}
		},
		data() {
			return {
			}
		},
		methods: {
			previous() {
				if (this.page === 1) return
				this.page--
				this.$emit('change', this.page)
			},
			next() {
				if (this.page * 10 > this.count) return
				this.page++
				this.$emit('change', this.page)
			},
		}
	}
</script>

<style lang="less" scoped>
	.container {
		height: 100%;

		.pagingBox {
			display: flex;
			justify-content: center;
			align-items: center;

			.previous {
				margin-right: 16px;
				padding: 0 12px;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.next {
				margin-left: 16px;
				padding: 0 12px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.rechargeRecordItem {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px;
		margin-bottom: 4px;

		&:nth-child(2n-1) {
			background: #2b333b;
		}

		.left {
			display: flex;
			flex-direction: column;

			.waiting {
				font-weight: 700;
				color: #fff;
			}

			.time {
				font-size: .75rem;
				font-weight: 400;
				line-height: 1.25rem;
				letter-spacing: .03333em;
				color: #adadc2;
			}
		}

		.amount {
			color: #adadc2;
		}
	}
</style>